<template>
	<div style="background-color: #f4fafe;overflow: hidden;">
		<div class="main_header">作业详情</div>
		<div class="main">
			<div class="topic">
				<div class="topic_main">
					<div>题目</div>
					<div>共{{questions.length}}题</div>
				</div>

				<div class="question" v-for="(item, idx) in questions" :key="idx">

					<p style="display: flex;">{{ `${idx+1}.[${item.name}](${item.score})`}}
						<div v-html="`${md(item.content)}`"></div>
					</p>
					<div v-for="(Item,indx) in item.optionsList" :key="indx+'hh'" style="display: flex;">
						<div v-if="item.topicId==1">
							<el-radio v-model="item.answer" :label="Item.id" style="margin-top: 0.625rem;" @change="ChangeItem(idx)">
								<div style="display: flex;">{{letter[indx]}}:
									<div v-html="`${md(Item.content)}`"></div>
								</div>
							</el-radio>
						</div>
						<div v-if="item.topicId==2">
							<el-checkbox-group v-model="item.answerList">
								<el-checkbox :label="Item.id" :key="indx" @change="ChangeItem(idx)" style="margin-top: 1.25rem;">
									<div style="display: flex;">{{letter[indx]}}:
										<div v-html="`${md(Item.content)}`"></div>
									</div>
									
								</el-checkbox>
							</el-checkbox-group>
						</div>
					</div>
					<div v-if="item.topicId==3">

						<div v-for="(Item,indx) in exam" :key="indx+'hh'" style="display: flex;">
							<el-radio v-model="item.answer" :label="Item.id" style="margin-top: 0.625rem;" @change="ChangeItem(idx)">
								<div>{{letter[indx]}}:{{Item.value}}
								</div>
							</el-radio>
						</div>
					</div>
					<div v-if="item.topicId==4" style="height: 22.5rem;">
						<quill-editor v-model="item.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
					</div>
					<div v-if="item.topicId==5" style="height: 22.5rem;">
						<quill-editor v-model="item.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
					</div>


				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import {
		TestManager
	} from "../../../../../request/test.js"
	import marked from "marked";
	export default{
		data(){
			return{
				question:[],
				textname:'',
				questions:[],
				testid:this.$route.params.testid,
				letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
				exam:[
					{
						value:"正确",
						id:1
					},
					{
						value:"错误",
						id:0
					}
				],
			}
		},
		methods:{
			md(content) {
				return marked(content);
			},
			getQuestionnaireTest() {
				console.log(this.$route.params.testid)
				var parmas = {
					id: this.testid.testPaperId
				}
				TestManager.getQuestionnaireTest(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.question = e.data.data;
					this.textname = this.question.testPaper.name;
					this.questions = e.data.data.questions.map(q => {
						return {
							...q,
							answerList: [],
						}
					})
					console.log(this.questions);
				})
			},
		},
		created() {
			this.getQuestionnaireTest();
		}
	}
</script>

<style scoped="scoped">
	.main_header {
		text-align: center;
		background-color: #03d3bd;
		height: 2.875rem;
		line-height: 2.875rem;
		color: white;
		position: fixed;
		top: 0;
		width: 100%;
	}

	.main {
		background-color: #ffffff;
		min-height: 100vh;
		margin-top: 4rem;
		width: 80%;
		margin-left: 10%;
		border-radius: 0.3125rem;
	}
	.topic_main {
		padding:1.25rem;
		display: flex;
		justify-content: space-between;
	}
	.topic {
		margin-top: 3.125rem;
		height: 80%;
		background-color: #fff;
	}
	.topic .question {
		flex: 5;
		display: flex;
		flex-direction: column;
		padding: 50px;
		border-bottom: 1px solid #dfdfdf;
	}
	
	.topic .question .el-radio-group {
		display: flex;
		flex-direction: column;
	}
	
	.el-radio-group .el-radio {
		height: 40px;
		line-height: 40px;
	}
	
	.question li {
		list-style: none;
		display: block;
		height: 40px;
		margin-left: 1.875rem;
		display: flex;
		align-items: center;
	}
	
	.question span {
		display: inline-block;
		height: 20px;
		padding: 2px 5px;
		border-radius: 3px;
		border: 1px solid #fdf6ec;
	}
	
	.question .yes {
		background: #f0f9eb;
		color: #97d3bf;
	}
	
	.question .no {
		background-color: #fdf6ec;
		color: #e7ac95;
	}
	.el-radio{
		display: flex;
		margin-top: 1.875rem;
	}
	
</style>
